<template>
  <div class="my-approve">
    <div class="approve-body">
      <el-table ref="singleTable" :data="approveList" highlight-current-row>
        <el-table-column type="index" label="编号" header-align="center" align="center"></el-table-column>
        <el-table-column property="username" label="用户名" header-align="center" align="center"></el-table-column>
        <el-table-column property="approveStateDesc" label="审批状态" header-align="center"
                         align="center"></el-table-column>
        <el-table-column property="approveUserName" label="审批人" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template #default="scope">
            <el-button v-show="scope.row.approveState === 0" size="mini" type="success" icon="el-icon-check" @click="handleApprove(scope.row.id, 1)">通过
            </el-button>
            <el-button v-show="scope.row.approveState === 0" size="mini" type="danger" icon="el-icon-close" @click="handleApprove(scope.row.id, -1)">拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="showPage" class="mpage"
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     layout="total, sizes, prev, pager, next, jumper"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {approveList, approveSave} from "../api";

export default {
  name: 'MyApprove',
  data() {
    return {
      approveList: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      showPage: false
    }
  },
  created() {
    this.getApproveList(this.currentPage, this.pageSize)
  },
  methods: {
    handleApprove(userId, approveState) {
      let _this = this
      let token = _this.$store.getters.token
      let config = {
        headers:
          {
            'Authorization': token
          }
      }

      let params = {
        userId: userId,
        approveState: approveState
      }

      approveSave(params, config).then(res => {
        if (res.data.code === 200) {
          _this.$message.success({'message': '操作成功', duration: 2 * 1000})
          _this.getApproveList()
        }
      }).catch(error => {
        _this.$message.error('操作失败')
      })
    },
    getApproveList(currentPage, pageSize) {
      let _this = this
      let token = _this.$store.getters.token
      let headers = {'Authorization': token}
      let params = {'currentPage': currentPage, 'pageSize': pageSize}
      approveList(params, headers).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.approveList = res.data.records
          this.currentPage = res.data.current
          this.pageSize = res.data.size
          this.total = res.data.total
          this.showPage = this.approveList.length > 0
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleSizeChange(pageSize) {
      this.getApproveList(this.currentPage, pageSize)
    },
    handleCurrentChange(currentPage) {
      this.getApproveList(currentPage, this.pageSize)
    }
  }
}
</script>

<style scoped>
.my-approve {
  margin-top: 50px;
  margin-left: 20px;
}

.mpage{
  margin: 0 auto;
  text-align: center;
}
</style>
